import "ol/ol.css";
import { Feature } from "ol/index";
import { boundingExtent, containsExtent, getCenter } from "ol/extent";
import { Circle as CircleStyle, Fill, Stroke, Style } from "ol/style";
import { Polygon } from "ol/geom";
import { Vector as VectorLayer } from "ol/layer";

let featureLayer;
// 创建一个矢量图层，用于添加要素（多边形、圆形、线段）
featureLayer = new VectorLayer({
  id: "eguid-marker",
  zIndex: 1,
  source: new VectorSource({
    features: [],
  }),
  style: featureStyle,
  visible: true, // 是否显示图层，默认true
});
map.addLayer(featureLayer);

const featureStyle = new Style({
  stroke: new Stroke({
    color: "rgba(255,0,0, 1)",
    width: 2,
  }),
  fill: new Fill({
    color: "rgba(255,255,0, 0.5)",
  }),
  image: new CircleStyle({
    radius: 8,
    fill: new Fill({
      color: "blue",
    }),
    stroke: new Stroke({
      color: "white",
      width: 8,
    }),
  }),
});

// 根据多个点边界自动调整地图到
function fitToMultiPoint(points) {
    // 创建一个矢量图层，用于添加要素（多边形、圆形、线段）
featureLayer = new VectorLayer({
    id: "eguid-marker",
    zIndex: 1,
    source: new VectorSource({
      features: [],
    }),
    style: featureStyle,
    visible: true, // 是否显示图层，默认true
  });
  map.addLayer(featureLayer);
  
  // 多边形
  const poly = new Feature({
    geometry: new Polygon([points]),
  });
  featureLayer.getSource().addFeature(poly);

  // 创建一个矩形边界框
  const extent = boundingExtent(points);
  const cuVisibleExtent = map.getView().calculateExtent(map.getSize());
  console.log(extent);
  // 检查多个点的边界是否在可视区域内
  if (containsExtent(cuVisibleExtent, extent)) {
    map.getView().setCenter(getCenter(extent));
    console.log("当前多个点在当前可视区域范围内，直接修改中心点");
  } else {
    // 将当前地图可视区域缩放到多个点的边界
    map
      .getView()
      .fit(extent, { size: map.getSize(), padding: [0, 50, 100, 200] });
    console.log("将当前地图可视区域缩放到多个点的边界");
  }
}
